<!DOCTYPE html>
<html>
<header>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> 
    
</header>
<style>
    .note{
        background-color:lightgoldenrodyellow;
        position: absolute;
    left: 25%;
    right: 50%;
    top: 20px;
    margin: 0 auto;
    overflow: hidden;
    width: 621px;
    height: 45px;
    border: none;
    }
    .form-submit{
        color:white;
        background-color: #8B475D;
        position: absolute;
    top: 20px;
    right: 32%;
    margin: 0;
    padding: 0;

    width: 48px;
    height: 47px;
    border: none;

    border-radius: 10px;
    line-height: 26px;
    cursor: pointer;
    font-size: 14px;
    line-height: 34px;
    /* 过渡 */
    transition: all 0.2s;
        
    }
    .form-submit:hover{
        background-color:#8B668B
    }
    h1{
        font-size:40px;
        color:sienna;
        

    }
    td{
        border-color:maroon;
        background-color: darkgrey;

    }
    a{
        background-color:maroon;
        color:aliceblue;
        transition: all 0.2s;
        width: 48px;
    height: 30px;
    border: none;
    }
    .form2{
        color:white;
        background-color: #8B475D;
        position: absolute;
        width: 48px;
    height: 47px;
    border: none;
    right: 32%;
    top: 70px;

    border-radius: 10px;
    line-height: 26px;
    cursor: pointer;
    font-size: 14px;
    line-height: 34px;
    /* 过渡 */
    transition: all 0.2s;
    }
</style>

<body>
    
    <form>
        <h2>一个特别简陋的新闻网站</h2>
        <br> <input class="note" type="text" name="title_text" >
        <input class="form-submit" type="button" value="搜索" onclick="find();">
       
        
       
    </form>
    <div class="cardLayout" style="margin: 10px 0px">
        <table width="100%" id="record2"></table>
    </div>
    <div class="cardLayout1" style="margin: 10px 10px">
        <table class="table" width="100%" id="record" border="1"></table>
    </div>
    <script>
        function find(){
            $.get('/process_get?title=' + $("input:text").val(), function(data) { 
                    $("#record2").empty(); //清空原列表
                    $("#record2").append('<tr class="cardLayout"><td>原网址</td><td>来源</td>' +
                        '<td>新闻标题</td><td>作者/原来源</td><td>发表时间</td></tr>'); //添加表头
                    for (let list of data) { //遍历添加数据
                        let table = '<tr class="cardLayout"><td>';
                        Object.values(list).forEach(element => {
                            table += (element + '</td><td>');
                        });
                        $("#record2").append(table + '</td></tr>');
                    }
                });


                $.get('/keywords_get?keywords=' + $("input:text").val(), function (data) {
            $("#record").empty();
            $("#record").append('<tr class="cardLayout1"><th>日期</th><th>热度</th></tr>');
            var Date = new Array();  // 定义一个字典
            for (let i = 0; i < data.length; i++) {
                var publish_date = data[i].publish_date.substring(0, 10);
                if (publish_date in Date) {
                    Date[publish_date] += 1;
                }
                else {
                    Date[publish_date] = 1;
                }
            }
            var dateSort = Object.keys(Date).sort();  // dateSort是Date按key排序后的字典，其可以为0~n序号，value为排序后的Date的key

            let table = '';
            for (var key in dateSort) {
                table += '<tr class="cardLayout"><td>';
                table += (dateSort[key] + '</td><td>' + Date[dateSort[key]] + '</td></tr>')
            }
            $("#record").append(table);
            $("#record").append('<p>共 ' + data.length + ' 条新闻纪录</p>');
        });
        }
        function searchkey(){
          
        $.get('/keywords_get?keywords=' + $("input:text").val(), function (data) {
            $("#record").empty();
            $("#record").append('<tr class="cardLayout1"><th>日期</th><th>热度</th></tr>');
            var Date = new Array();  // 定义一个字典
            for (let i = 0; i < data.length; i++) {
                var publish_date = data[i].publish_date.substring(0, 10);
                if (publish_date in Date) {
                    Date[publish_date] += 1;
                }
                else {
                    Date[publish_date] = 1;
                }
            }
            var dateSort = Object.keys(Date).sort();  // dateSort是Date按key排序后的字典，其可以为0~n序号，value为排序后的Date的key

            let table = '';
            for (var key in dateSort) {
                table += '<tr class="cardLayout"><td>';
                table += (dateSort[key] + '</td><td>' + Date[dateSort[key]] + '</td></tr>')
            }
            $("#record").append(table);
            $("#record").append('<p>共 ' + data.length + ' 条新闻纪录</p>');
        });
        }
    </script>
</body>

</html>